<template>
  <div class="menu-bar" :class="tabsClass">
    <van-tabs
      v-model="path"
      :title-active-color="rootThemeColor"
      @click="onTabClick"
    >
      <van-tab
        v-for="item in menus"
        :key="item.path"
        :title="item.title"
        title-class="nowrap"
        :name="item.path"
        :to="item.path"
      />
    </van-tabs>
  </div>
</template>

<script>
import { Tabs as VanTabs, Tab as VanTab } from 'vant'
export default {
  name: 'MenuBar',
  inject: ['rootThemeColor'],
  components: {
    VanTabs,
    VanTab
  },
  props: {
    menus: {
      type: Array
    },
    currentPath: {
      type: String
    },
    tabsClass: {
      type: String
    }
  },
  data () {
    return {
      path: this.currentPath
    }
  },
  watch: {
    currentPath: {
      handler (newVal) {
        this.path = newVal
      }
    }
  },
  methods: {
    onTabClick () {
      this.$emit('menu-click')
    }
  }
}
</script>

<style lang="scss" scoped>
  .menu-bar{
    ::v-deep .van-tabs__wrap {
      height: 40px;
    }
    ::v-deep .van-hairline--top-bottom::after{
      border-top-width: 0;
    }
    ::v-deep .van-tabs__line {
      background-color: $theme-color;
    }
    ::v-deep .van-tab {
      font-size: 14px;
    }
    ::v-deep .nowrap {
      white-space: nowrap;
    }
  }  
</style>
